<template>
  <div>
    <div class="timeSelect">
      <div v-show="search">
        <el-date-picker v-model="startTime" type="date" placeholder="选择日期"></el-date-picker>
        <a>-</a>
        <el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker>
      </div>
    </div>
    <div style="display: flex; flex-direction: row;">
      <div @click="handleClick('totalOrder')" class="topList" style="background-color: white;">
        <div class="topTextTop">订单总量</div>
        <div style="color: rgb(92, 92, 219);padding-top: 15px;font-weight: 700;">{{allOrder}}</div>
      </div>
      <div @click="handleClick(1)" class="topList" style="background-color:#00cc33">
        新电商
        <div class="topTextDown">{{newOrderShop}}</div>
      </div>
      <div @click="handleClick(3)" class="topList" style="background-color:#ff0066">
        政企集中服务平台
        <div class="topTextDown">{{politics}}</div>
      </div>
      <div @click="handleClick(2)" class="topList" style="background-color:#ff9933">
        家宽云平台
        <div class="topTextDown">{{cloud}}</div>
      </div>
      <div @click="handleClick(4)" class="topList" style="background-color:#66ccff">
        标准化业务受理
        <div class="topTextDown">{{standardization}}</div>
      </div>
    </div>
    <div v-show="!mapVisible" ref="main" id="main"></div>
    <div class="tooltip-container">
      <div class="tooltip-content" v-html="tooltipContent"></div>
    </div>
    <div>
      <MonitorEchart :dataX="dataX" :dataY="dataY"></MonitorEchart>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaMap from "/src/utils/china.json";
import MonitorEchart from "/src/components/monitor/echarts/MonitorEchart.vue";
import axios from "axios";
import { Alert } from "element-ui";

export default {
  components: {
    MonitorEchart
  },
  data() {
    return {
      startTime: "",
      endTime: "",
      mapVisible: false,
      dataX: [],
      dataY: [],
      provinceDataList: {},
      newOrderShop: 0,
      cloud: 0,
      politics: 0,
      standardization: 0,
      allOrder: 0,
      search: false
    };
  },
  methods: {
    // 查询全国的数据
    queryAllOrderMon() {
      this.$axios.get("/api/staffOrder/queryAllOrderMon").then(res => {
        const data = res.data.data;
        // 得到各个的总数
        const platformData = {
          newOrderShop: 0,
          politics: 0,
          cloud: 0,
          standardization: 0
        };

        data.forEach(item => {
          switch (item.sourceId) {
            case 1:
              platformData.newOrderShop += item.count;
              break;
            case 2:
              platformData.politics += item.count;
              break;
            case 3:
              platformData.cloud += item.count;
              break;
            case 4:
              platformData.standardization += item.count;
              break;
            default:
              break;
          }
        });
        this.newOrderShop = platformData.newOrderShop;
        this.politics = platformData.politics;
        this.cloud = platformData.cloud;
        this.standardization = platformData.standardization;
        this.allOrder +=
          this.newOrderShop +
          this.politics +
          this.standardization +
          this.cloud;

        // 使用对象存储每个省份的数据
        const provinceData = {};
        data.forEach(item => {
          const provinceName = item.province;
          if (!provinceData[provinceName]) {
            provinceData[provinceName] = {
              province: provinceName,
              allOrder: 0,
              newOrderShop: 0,
              politics: 0,
              cloud: 0,
              standardization: 0
            };
          }
          provinceData[provinceName].allOrder += item.count;
          switch (item.sourceId) {
            case 1:
              provinceData[provinceName].newOrderShop += item.count;
              break;
            case 2:
              provinceData[provinceName].politics += item.count;
              break;
            case 3:
              provinceData[provinceName].cloud += item.count;
              break;
            case 4:
              provinceData[provinceName].standardization += item.count;
              break;
            default:
              break;
          }
        });

        // 将处理后的省份数据赋值给组件属性
        this.provinceDataList = provinceData;
        console.log(this.provinceDataList);
        this.updateMapData();
      });
    },

    handleClick(type) {
      alert(type);

      this.mapVisible = true;

      if (type === "totalOrder") {
        this.startTime = "";
        this.endTime = "";
        this.search = false;
        this.mapVisible = false;
      } else if (type === 1 || type === 2 || type === 3 || type === 4) {
        this.search = true;
        let url = "/api/staffOrder/querySourceInfo?sourceId=" + type;
        if (this.startTime && this.endTime) {
          this.startTime = new Date(this.startTime).toISOString();
          this.endTime = new Date(this.endTime).toISOString();

          url += "&startTime=" + this.startTime + "&endTime=" + this.endTime;
        }
        this.$axios
          .get(url)
          .then(res => {
            const data = res.data.data || [];
            const dataX = [];
            const dataY = [];

            data.forEach(item => {
              dataX.push(item.serviceName);
              dataY.push(item.count);
            });

            this.dataX = dataX;
            this.dataY = dataY;
          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
      }
    },
    renderText(text) {
      var chain_map = echarts.init(this.$refs.main);
      var option = {
        graphic: {
          type: "text",
          top: "40%",
          left: "center",
          style: {
            text: text,
            fontSize: 24,
            fill: "#000"
          }
        }
      };
      chain_map.setOption(option);
    },
    updateMapData() {
      const seriesData = [];
      const allProvinceNames = Object.keys(this.provinceDataList);
      for (const provinceName of allProvinceNames) {
        const provinceData = this.provinceDataList[provinceName];
        seriesData.push({
          name: provinceData.province || "",
          value: provinceData.allOrder || 0,
          newOrderShop: provinceData.newOrderShop || 0,
          politics: provinceData.politics || 0,
          cloud: provinceData.cloud || 0,
          standardization: provinceData.standardization || 0
        });
      }
      // 更新地图数据
      this.$refs.main && this.renderMapChart(seriesData);
    },

    renderMapChart(seriesData) {
      var chain_map = echarts.init(this.$refs.main);
      echarts.registerMap("chinaMap", chinaMap);
      var option = {
        geo: {
          map: "chinaMap",
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: "#fff",
              borderWidth: 0.7,
              borderColor: "#9ffcff",
              shadowColor: "rgba(0,54,255, 1)",
              shadowBlur: 1
            }
          },
          label: {
            show: true,
            fontSize: 8
          },
          emphasis: {
            itemStyle: {
              areaColor: "#4876FF"
            }
          },
          select: {
            itemStyle: {
              areaColor: "#4876FF"
            }
          }
        },
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "mousemove click",
          formatter(params) {
            return `
  <div style="text-align: left;">
    <div>名称：${params.name}</div>
    <div>订单总量：${
      params.data && params.data.value !== undefined ? params.data.value : 0
    }</div>
    <div>新电商订单量：${
      params.data && params.data.newOrderShop !== undefined
        ? params.data.newOrderShop
        : 0
    }</div>
    <div>政企集中服务平台：${
      params.data && params.data.politics !== undefined
        ? params.data.politics
        : 0
    }</div>
    <div>家宽云平台：${
      params.data && params.data.cloud !== undefined ? params.data.cloud : 0
    }</div>
    <div>标准化业务受理订单量：${
      params.data && params.data.standardization !== undefined
        ? params.data.standardization
        : 0
    }</div>
  </div>
`;
          },
          padding: 8,
          borderColor: "#4876FF",
          borderWidth: 3,
          backgroundColor: "#fff",
          textStyle: {
            color: "#649ED"
          }
        },
        series: [
          {
            type: "map",
            geoIndex: 0,
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                areaColor: "#000",
                borderColor: "#a18a3a",
                borderWidth: 9
              },
              emphasis: {
                show: false,
                areaColor: null
              }
            },
            data: seriesData
          }
        ]
      };
      chain_map.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  created() {
    this.queryAllOrderMon();
  }
};
</script>

<style scoped>
#main {
  width: 800px;
  height: 600px;
  margin: 0 auto;
}
.topList {
  width: 30vh;
  height: 8vh;
  padding: 10px;
  margin-right: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  clip-path: polygon(
    0% 0%,
    90% 0%,
    100% 20%,
    100% 80%,
    93% 100%,
    0% 100%,
    0% 90%,
    0% 10%
  );
}
.topTextDown {
  color: #fff;
  padding-top: 8px;
  font-weight: 700;
}
.topTextTop {
  color: #fff;
  background-color: rgba(52, 100, 195, 0.927);
  margin: -10px;
  margin-top: 0.2px;
  padding: 3px;
  width: 90px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.timeSelect {
  position: relative;
  padding: 10px;
}

#main {
  position: relative;
  right: 150px;
  width: 1000px;
  height: 800px;
}
.bar-chart-container {
  position: fixed;
}
</style>
